<script setup>
import * as echarts from 'echarts'
import { onMounted, inject, reactive } from 'vue'

const $http = inject('$http')

const colorList = ['#209DFD', '#0BB6D3', '#D45BD4', '#4B5DC2']

const dataObj = reactive({
  list: [],
})

var dom
var myChart
var option

onMounted(() => {
  // 饼图
  dom = document.getElementById('featureChart')
  myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false,
  })

  getChartData()
})

function getChartData() {
  $http.get('/screen/person/age-group').then(res => {
    const { data = [] } = res || {}

    const total = data.reduce((a, b) => a + b.value, 0) || 0,
      min = Math.floor((total * 35) / 100) || 0,
      yData =
        data.map((item, index) => {
          const value = item.value > min ? item.value : min,
            percent = value && total ? Number(((100 * value) / total).toFixed(2)) : 0

          return {
            value,
            name: item.label,
            color: colorList[index],
            percent,
          }
        }) || []

    dataObj.list = yData

    option = {
      grid: {
        top: '24',
        bottom: '24',
        left: '16',
        right: '16',
        containLabel: true,
      },
      tooltip: {
        trigger: 'item',
        axisPointer: {
          type: 'shadow',
        },
        backgroundColor: 'rgba(0,0,0,0.5)',
        borderColor: 'rgba(0,0,0,0)',
        textStyle: {
          color: '#ffffff',
        },
      },
      color: colorList,
      series: [
        {
          name: '',
          type: 'pie',
          radius: ['20%', '50%'],
          avoidLabelOverlap: false,
          roseType: 'area',
          minAngle: 10,
          label: {
            show: true,
            formatter: function (e) {
              return e?.data?.percent + '%'
            },
            color: '#ffffff',
          },
          labelLine: {
            show: true,
          },
          data: yData,
        },
      ],
    }

    if (option && typeof option === 'object') {
      myChart.setOption(option)
    }

    window.addEventListener('resize', myChart.resize)
  })
}
</script>

<template>
  <div class="featureBox">
    <div class="title">人口特征结构</div>

    <div id="featureChart" style="width: 100%" class="charts"></div>

    <div class="descItems">
      <div class="descItem" v-for="(item, index) in dataObj.list" :key="index">
        <div class="labelBox">
          <div class="label" :style="{ background: item.color }"></div>
          <div class="name">{{ item.name }}</div>
        </div>
        <div class="num">{{ item.value }}人</div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.featureBox {
  width: 340px;
  height: 533px;
  background-image: url('@/assets/people/boxbg4.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .title {
    margin-top: 8px;
    width: 100%;
    height: 20px;
    font-size: 14px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .charts {
    flex: 1;
  }

  .descItems {
    display: flex;
    flex-wrap: wrap;
    height: 216px;
    padding: 8px 16px 24px 16px;

    .descItem {
      width: 98px;
      height: 52px;
      padding: 24px;
      background: rgba(19, 181, 177, 0.2);

      &:nth-child(2n) {
        margin-left: 16px;
      }

      &:nth-child(n + 3) {
        margin-top: 16px;
      }

      .labelBox {
        display: flex;
        align-items: center;

        .label {
          width: 16px;
          height: 16px;
          background: #209dfd;
          border-radius: 4px;
        }

        .name {
          margin-left: 6px;
          flex: 1;
          height: 20px;
          font-size: 14px;
          font-weight: 600;
          color: #ffffff;
          display: flex;
          align-items: center;
          white-space: nowrap;
        }
      }

      .num {
        margin-top: 12px;
        height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
